<template>
  <el-card shadow="never">
    <div class="comment-card">

      <div class="comment-head">
        <a class="head f-pr">
          <img :src="changeUrlToResizeImg(comment.userVO.avatarImgUrl, 50)"
               height="50"
               width="50">
        </a>
      </div>
      <div class="comment-part">

        <div class="comment-text">
          <p class="f-brk">
            <span class="name">
              <a class="s-fc7">{{comment.userVO.nickname}}</a>对
               <router-link :to="{path:'playlistDetail',query:{id:comment.target.targetId}}" :title="comment.target.targetName" class="tit f-thide s-fc0">
                  <a class="s-fc7">
                    {{comment.target.targetName}}
                  </a>
               </router-link>
              的评论
            </span>
              :
              {{comment.content}}
          </p>
        </div>

        <div class="comment-replied" v-if="comment.replyComment !== null">
          <p class="f-brk">
            <span class="name">
              <a class="s-fc7">{{comment.replyComment.userVO.nickname}}</a>
            </span>
            :
            {{comment.replyComment.content}}

          </p>
        </div>

        <div class="bottom clearfix">
          <time class="time">{{ new Date(comment.createTime).toLocaleString() }}</time>
          <div class="show-reply" >
            <!--<img src="../image/like.png" height="18px" width="18px" style="margin-right: 5px" v-if="!isLiked" @click="likeComment">-->
            <!--<img src="../image/liked.png" height="18px" width="18px" style="margin-right: 5px" v-else @click="cancelLikeComment">-->
            <el-button type="text"  class="show-reply" @click="read">{{readTag}}</el-button>
          </div>
        </div>

      </div>

    </div>

  </el-card>
</template>

<script>
    import Bus from '../util/bus';
    import {apiContext} from "../service/getData"
    import {getUser} from '../util/userUtils'

    export default {
        name: "messageCard",
        props: {
          comment: {

          }
        },
        inject: ['reload'],
        data() {
          return {

            // comment: {
            //   currentDate: "2018/7/17",
            //   userName: "小明",
            //   commentText: "你怎么这么骚"
            // },
            // commentReplied: {
            //   currentDate: "2018/7/17",
            //   userName: "小王",
            //   commentText: "秀秀秀"
            // },
            // hasReply: false,
            inputReply: "",
            showReplyForm: false,
            isLiked: false,
            readTag: "未读"
          }
        },
        methods: {
          changeUrlToResizeImg(picUrl, size) {
            return picUrl.replace(/yunmusic_dev/, "resize_" + size + 'x' + size);
          },
          read() {
            let user = getUser();
            let data = {userId: user.id, commentId: this.comment.id};
            Bus.$emit("on-websocket-send", JSON.stringify(data))
            this.readTag = "已读"
            Bus.$emit("refresh-my-messages");
          }
        },
        mounted(){

          // console.log(this.comment)
        }
    }
</script>

<style scoped>
  .time {

    font-size: 13px;
    color: #999;
  }

  .bottom {
    margin-top: 50px;
    line-height: 12px;
  }

  .show-reply {
    padding: 0;
    float: right;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both
  }

  .head {
    float: left;
    width: 50px;
    height: 50px;
    margin-left: 20px;
    _margin-left: 10px;
    padding: 2px;
    background: #fff;
    border: 1px solid #dadada;
  }

  .comment-part {
    flex-grow: 20
    /*margin-left: 100px;*/
  }

  .comment-head {
    flex-grow: 1
    /*width: 100px;*/
    /*height: 100px;*/
  }

  .comment-card {
    display: flex;
  }

  .comment-text {
    width: 350px;
  }

  .s-fc7, a.s-fc7:hover {
    color: #0c73c2;
  }

  .f-brk {
    word-wrap: break-word;
    white-space: normal;
    font-size: 13px;
  }

  .comment-replied {
    margin-top: 20px;
    margin-bottom: -25px;
    padding: 20px;
    border: 1px solid rgb(222, 222, 222);
    border-radius: 5px;
    background-color: rgb(244, 244, 244);

  }

  .form-reply {
    display: flex;
    margin-top: 20px;
    padding: 20px;
    border: 1px solid rgb(222, 222, 222);
    border-radius: 5px;
    background-color: rgb(244, 244, 244);
  }

  .input-reply {

  }

  .button-reply {
    margin-left: 20px;
  }

  .comment-target {
    font-size: 13px;
  }
</style>
